import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { useEffect } from 'react';
const MapFs=()=>{
    useEffect(()=>{
        const scene = new Scene({
            id: 'MapFs',
            map: new GaodeMap({
              style: 'dark',
              center: [120.145, 30.238915],
              pitch: 60,
              width:800,
              logoVisible:false, //logo是否可见
              height:600,
              zoom: 13.2,
              token: 'd146894d2b143531eceec64681a41346',
            }),
          });
          fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json').then(async (res) => {
            const pointLayer = new CityBuildingLayer();
            // 雷达图配置
            // source 普通的点数据
            // 大小 size

            pointLayer
              .source(await res.json())
              .size('floor', [0, 800])
              .color('rgba(242,246,250,0.2)')
              .animate({
                enable: true,
              })
              .shape('square')
              .active({
                color: '#0ff',
                mix: 0.5,
              })
              .style({
                
                opacity: 0.7,
                baseColor: 'rgb(16, 16, 16)',
                windowColor: 'rgb(30, 60, 89)',
                brightColor: 'rgb(255, 176, 38)',
                sweep: {
                  enable: true,
                  sweepRadius: 2, //水波纹环数
                  sweepColor: '#1990FF',
                  sweepSpeed: 0.2, //水波纹 速度 数字越小越快
                  sweepCenter: [120.145319, 30.238915], //水波纹中心点
                },
              });
            scene.addLayer(pointLayer);
          });
          
          fetch('https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json')
            .then((data) => data.json())
            .then(({ lakeBorderData, lakeData, landData }) => {
              const lakeLayer = new PolygonLayer()
                .source(lakeData)
                .shape('triangle')
                .color('#ff7300')
                .style({
                  opacity: 0.9,
                  opacityLinear: {
                    enable: true,
                    dir: 'out', // in - out
                  },
                });
              const landLayer = new PolygonLayer()
                .source(landData)
                .shape('fill')
                .color('#3CB371')
                .style({
                  opacity: 0.4,
                  opacityLinear: {
                    enable: true,
                    dir: 'in', // in - out
                  },
                });
          
              const lakeBorderLayer = new PolygonLayer()
                .source(lakeBorderData)
                .shape('fill')
                .color('#ccc')
                .style({
                  opacity: 0.5,
                  opacityLinear: {
                    enable: true,
                    dir: 'in', // in - out
                  },
                });
          
              scene.addLayer(lakeLayer);
              scene.addLayer(lakeBorderLayer);
              scene.addLayer(landLayer);
            });
          
          fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
            .then((res) => res.json())
            .then((data) => {
                // 路径图
              const layer = new LineLayer({
                zIndex: 0,
                depth: true,
              })
                .source(data)
                .size(1)
                .shape('line') // 线类型  arc弧线 
                .color('#1990FF')
                .animate({
                  interval: 1, // 间隔
                  duration: 2, // 持续时间，延时
                  trailLength: 2, // 流线长度
                });
              scene.addLayer(layer);
            });
            // 添加地理围墙
            scene.on('loaded', () => {
                fetch('https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json')
                  .then((res) => res.json())
                  .then((data) => {
                    const layer = new LineLayer({}).source(data).size(4).shape('wall').style({
                      opacity: 1,
                      sourceColor: '#0DCCFF',
                      targetColor: 'rbga(255,255,255, 0)',
                    });
                    scene.addLayer(layer);
                  });
              });
},[])


    return (
        <div id="MapFs" style={{width:'100%',height:'400px',overflow:'hidden'}}>MapFs</div>

    )
}

export default MapFs;